<template>
  <el-cascader :placeholder="placeholder"
               :value="currentValue"
               :expand-trigger="expandTrigger"
               :options="regionData"
               :change-on-select="singleSelect"
               @change="handleChange">
  </el-cascader>
</template>

<script>
const BEIJING = [110000, 110100, 110101]
export default {
  props: {
    value: {
      type: Array,
      default () {
        return BEIJING
      }
    },
    placeholder: {
      type: String,
      default: '请选择地址'
    },
    simple: {
      type: Boolean,
      default: false
    },
    city: {
      type: String,
      default: ''
    },
    expandTrigger: {
      type: String,
      default: 'hover' // click
    },
    singleSelect: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      regionData: [],
      originData: []
    }
  },
  computed: {
    currentValue () {
      return this.value.map(item => Number(item))
    },
    cacheKey () {
      return this.simple ? 'REGION_SIMPLE' : 'REGION'
    }
  },
  methods: {
    getName (values = this.currentValue) {
      const nameArr = values.map(item => this.findRegionName(item))
      const name = nameArr.join(' ')
      if (name.replace(' ', '')) {
        this.$emit('setname', name)
      }
      return name
    },
    findRegionName (value) {
      const target = this.originData.find(item => item.value === value)
      return target ? target.region_name : ''
    },
    handleChange (values) {
      const name = this.getName(values)
      console.log('123')
      this.$emit('change', values, name, this.regionData)
      this.$emit('blur', values)
      this.$emit('input', values)
    },
    getLocalRegion () {
      try {
        const regionStr = localStorage.getItem(this.cacheKey)
        return JSON.parse(regionStr)
      } catch (e) {
        return null
      }
    },
    getLocalRegionOrigin () {
      try {
        const regionStr = localStorage.getItem(this.cacheKey + '_ORIGIN')
        return JSON.parse(regionStr)
      } catch (e) {
        return null
      }
    },
    async fetchData () {
      if (!this.getLocalRegion()) {
        // if (true) {
        const data = await this.$http({
          url: '/api/dashboard/v1/region'
        }, false)
        this.originData = data.list
        this.regionData = this.prepareData(this.originData)
        localStorage.setItem(this.cacheKey + '_ORIGIN', JSON.stringify(this.originData))
        localStorage.setItem(this.cacheKey, JSON.stringify(this.regionData))
      } else {
        this.originData = this.getLocalRegionOrigin()
        this.regionData = this.getLocalRegion()
      }
    },
    prepareData (originData) {
      const provinces = originData.filter(item => item.parent_id === 0)
      return provinces.map(item => {
        this.findChildren(item, originData)
        return item
      })
    },
    findChildren (item, originData) {
      item.label = item.region_name
      item.value = item.region_id
      const children = originData.filter(it => it.parent_id === item.region_id)
      if (children.length > 0) {
        item.children = children
        item.children.forEach(it => this.findChildren(it, originData))
      }
    },
    findName (code) {
      const target = this.originData.find(item => item.code === code)
      return target ? target.name : ''
    },
    region_name () {
      return this.value.map(item => this.findName(item)).join('')
    }
  },
  mounted () {
    this.fetchData()
  }
}
</script>

<style>
</style>
